﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>查找</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="~/Scripts/layui/css/layui.css" rel="stylesheet" />
    <style>
        .user_photo {
            width:30px;
            height:30px;
        }
    </style>
</head>
<body>
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">搜索用户</li>
            <li>搜索群组</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <form class="layui-form" id="formSearchUser" action="">
                    <div class="layui-form-item">
                        <div class="layui-input-inline"  style="margin-left:0px;">
                            <input type="text" id="txtUserName" name="title" lay-verify="title" autocomplete="off" placeholder="输入昵称查询" class="layui-input" />
                        </div>
                        <div class="layui-input-inline"><button class="layui-btn" lay-submit lay-filter="formSearchUser">搜索</button></div>
                    </div>
                </form>
                <table class="layui-table">
                    <colgroup>
                        <col width="30">
                        <col width="150">
                        <col>
                    </colgroup>
                    <thead>
                        <tr>
                            <th>头像</th>
                            <th>昵称</th>
                            <th>签名</th>
                            <th>注册时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="tbody_users">
                                 
                    </tbody>
                </table>
                <div id="page_find_users"></div>
            </div>
            <div class="layui-tab-item">
                <form class="layui-form" id="formSearchGroup" action="">
                    <div class="layui-form-item">
                        <div class="layui-input-inline" style="margin-left:0px;">
                            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="输入群名查询" class="layui-input" />
                        </div>
                        <div class="layui-input-inline"><button class="layui-btn" lay-submit lay-filter="formSearchGroup">搜索</button></div>
                    </div>
                </form>
                    <table class="layui-table">
                        <colgroup>
                            <col width="30">
                            <col width="150">
                            <col>
                        </colgroup>
                        <thead>
                            <tr>
                                <th>群标</th>
                                <th>名称</th>
                                <th>简介</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="tbody_groups">
                            
                        </tbody>
                    </table>
                <div id="page_find_groups"></div>
        </div>

        </div>
    </div>
    <script type="text/html" id="tempalte_users">
        {{# for(var i = 0, len = d.List.length; i < len; i++){ }}
        <tr>
            <td><img class="user_photo" src="{{ d.List[i].photo }}" /></td>
            <td>{{ d.List[i].name }}</td>
            <td>{{ d.List[i].sign }}</td>
            <td>{{ d.List[i].addtimestr }}</td>
            <td>
                {{# if(!d.List[i].isself===true){ }}
             <button class="layui-btn layui-btn-small layui-btn-normal" data-uid="{{ d.List[i].id }}" search-event="addfriend">加为好友</button>
                {{# } }}
            </td>
        </tr> 
        {{# } }}
    </script>
    <script type="text/html" id="tempalte_groups">
        {{# for(var i = 0, len = d.List.length; i < len; i++){ }}
        <tr>
            <td><img class="user_photo" src="{{ d.List[i].photo }}" /></td>
            <td>{{ d.List[i].name }}</td>
            <td>{{ d.List[i].gdesc }}</td>
            <td>{{ d.List[i].addtimestr }}</td>
            <td>
                {{# if(!d.List[i].isjoin===true){ }}
                <button class="layui-btn layui-btn-small layui-btn-normal" data-gid="{{ d.List[i].id }}" data-owner="{{ d.List[i].owner }}" search-event="addgroup">申请加入</button>
                {{# } }}
            </td>
        </tr>
        {{# } }}
    </script>
    <script src="~/Scripts/layui/layui.js"></script>
    @{
        Html.RenderPartial("~/Views/Shared/_LoginPartical.cshtml");
    }
    <script>
        var pageindex = {
            users: 1,
            groups:1
        }
        var pages = {};
        var currentUid = getUserId();
        layui.use(['laypage', 'element', 'layer', 'laytpl', 'form'], function () {
           var $ = layui.jquery
            , element = layui.element()
            , laypage = layui.laypage
            , layer = layui.layer
            , laytpl = layui.laytpl
            , form = layui.form();

           pages.$ = $;
           pages.layer = layer;
           
            $(function () {
                //默认先加载第一页的用户数据
                d.searchUser($, laytpl, laypage,layer);
                d.searchGroup($, laytpl, laypage,layer);
                //监听搜索
                form.on('submit(formSearchUser)', function (data) {
                    var name = data.field.title;
                    d.searchUser($, laytpl, laypage,layer, name);
                    return false;
                });
                form.on('submit(formSearchGroup)', function (data) {
                    var name = data.field.title;
                    d.searchGroup($, laytpl, laypage,layer, name);
                    return false;
                });
                //注册
                $('body').on('click', '*[search-event]', function (e) {
                    var othis = $(this), method = othis.attr('search-event');
                    d[method] ? d[method].call(this, othis, e) : '';
                });
            })
        });

        var d = {
            searchUser: function ($,laytpl,laypage,layer,n) {
                this.search('users', $, laytpl, laypage,layer, n);
            },
            searchGroup: function ($, laytpl, laypage,layer, n) {
                this.search('groups', $, laytpl, laypage, layer, n);
            },
            search: function (t, $, laytpl, laypage,layer, n) {
                n = n || '';
                var loading = layer.load(1);
                $.get('/search/' + t, { name: n, pageindex: pageindex[t], pagesize: 20 }, function (res) {
                    layer.close(loading);

                    if (pageindex[t] == 1) {
                        laypage({
                            cont: 'page_find_' + t
                            , pages: res.TotalPageCount //总页数
                            , groups: 5 //连续显示分页数
                            , jump: function (obj, first) {
                                //得到了当前页，用于向服务端请求对应数据
                                if (pageindex[t] == obj.curr) {
                                    return;
                                } else {
                                    pageindex[t] = obj.curr;
                                    d.search(t, $, laytpl, laypage,layer)
                                };
                            }
                        });
                    }
                    if (res.List && res.List.length) {
                        var gettpl = $('#tempalte_' + t).html();
                        var list = res.List.map(function (item) {
                            item.isself = item.id.toString() === currentUid.toString();
                            return item;
                        });
                        res.List = list;
                        laytpl(gettpl).render(res, function (html) {
                            $('#tbody_' + t).html(html);
                        });
                    } else {
                        $('#tbody_' + t).html('<tr><td colspan="4">无符合条件的结果</td></tr>');
                    }
                });
            },
            addfriend: function (othis) {
                var uid = othis.data('uid');
                pages.$.post('/apply/friend', { targetid: uid }, function (res) {
                    if (res.code == 0) {
                        pages.layer.msg('申请已发送');
                    } else {
                        pages.layer.msg(res.msg);
                    }
                });
            },
            addgroup: function (othis) {
                var gid = othis.data('gid');
                var owner = othis.data('owner');
                pages.$.post('/apply/group', { targetid: owner,gid:gid }, function (res) {
                    if (res.code == 0) {
                        pages.layer.msg('申请已发送');
                    } else {
                        pages.layer.msg(res.msg);
                    }
                });
            }
        };
    </script>
</body>
</html>